<template>
  <el-container class="official-account-management_user-tag">
    <el-main>
      <el-card shadow="never" class="tableCard">
        <vxe-toolbar :custom="{icon: 'el-icon-s-operation'}" :refresh="{query: getList1}" print>
          <template v-slot:buttons>
            <el-button type="primary" icon="el-icon-plus" @click="openDialog('')">新增</el-button>
            <el-button type="primary" icon="el-icon-download">导出</el-button>
          </template>
        </vxe-toolbar>
        <vxe-table
          ref="xTable"
          border
          resizable
          highlight-hover-row
          :loading="loading"
          :auto-resize="true"
          :data="list"
          width
          max-height="500"
          :print-config="{}"
        >
          <vxe-table-column field="titleName" align="center" title="名称" />
          <vxe-table-column field="publishStatus" width="80" align="center" title="用户状态">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.publishStatus" :inactive-value="0" :active-value="1" @change="changeState(scope)" />
            </template>
          </vxe-table-column>
          <vxe-table-column title="操作" fixed="right" align="center" width="180" slots="default">
            <template slot-scope="scope">
              <el-button type="text" size="mini" icon="el-icon-edit" @click="openDialog(scope.row.id)">编辑</el-button>
              <el-button type="text" size="mini" icon="el-icon-delete" @click="delDialog(scope.row.id)">删除</el-button>
            </template>
          </vxe-table-column>
        </vxe-table>
        <vxe-pager
          :current-page.sync="tableCurrentPage"
          :page-size.sync="pageSize"
          :total="total"
          :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
          @page-change="getRentList()"
        />
      </el-card>
    </el-main>
    <el-dialog :title="title" :close-on-click-modal="false" :visible.sync="dialogFormVisible">
      <el-form ref="ruleForm" :model="dialogParams" :rules="rules" label-width="5rem">
        <el-row>
          <el-col :span="12">
            <el-form-item prop="titleName" label="名称：">
              <el-input v-model="dialogParams.titleName" placeholder="请输入名称" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="clickSure">确 定</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
import { checkVaildWxMp, getUserTagList, addUserTag, editUserTag, delUserTag, searchUserTag, changeUserTag } from '@/api/wxMp'

export default {
  data() {
    return {
      title: '',
      rules: {
        titleName: [
          { required: true, message: '请输入项目名称', trigger: 'blur' }
        ]
      },
      loading: false,
      list: [],
      tableCurrentPage: 1,
      pageSize: 20,
      total: 0,
      dialogParams: {
        appId: '',
        titleName: ''
      },
      params: {
        appId: '',
        titleName: '',
        pageNum: 1,
        pageSize: 20
      },
      dialogFormVisible: false
    }
  },
  created() {
    this.getMpIdList()
  },
  methods: {
    refreshParams(params) {
      this.params = params
      this.getList()
    },
    getList1() {
      this.params.pageNum = 1
      this.getList()
    },
    getMpIdList() {
      checkVaildWxMp().then(res => {
        this.params.appId = res.appId
        this.dialogParams.appId = res.appId
        this.getList()
      })
    },
    getList() {
      getUserTagList(this.params).then(res => {
        this.list = res.records
        this.total = res.total
      })
    },
    clickSure() {
      console.log(this.dialogParams)
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (this.title === '新增') {
            addUserTag(this.dialogParams).then(res => {
              this.$message.success('新增成功！')
              this.getList()
              this.dialogFormVisible = false
            })
          } else {
            editUserTag(this.dialogParams).then(res => {
              this.$message.success('编辑成功！')
              this.getList()
              this.dialogFormVisible = false
            })
          }
        }
      })
    },
    changeState(scope) {
      this.list[scope.seq - 1].publishStatus = scope.row.publishStatus === 1 ? 0 : 1
      changeUserTag({ id: scope.row.id, status: scope.row.publishStatus === 1 ? 0 : 1 }).then(res => {
        this.list[scope.seq - 1].publishStatus = scope.row.publishStatus === 1 ? 0 : 1
        // this.$message.success('修改状态成功!')
        this.getList()
      })
    },
    openDialog(id) {
      this.dialogParams = {
        appId: this.dialogParams.appId,
        titleName: ''
      }
      this.title = id === '' ? '新增' : '编辑'
      if (id !== '') {
        searchUserTag({ id: id }).then(res => {
          this.dialogParams = res
        })
      }
      this.dialogFormVisible = true
    },
    delDialog(id) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delUserTag({ id }).then(res => {
          this.$message.success('删除成功!')
          this.getList()
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    }
  }
}
</script>

<style lang="scss">
.official-account-management_user-tag {}
</style>
